@font-face {
	font-family: 'iconfont';
	src: url('../../fonts/iconfont.ttf') format('truetype');
}
html,body{
	width: 100%; height: 100%; overflow: hidden;
	background-color: #ffffff;
}
html,body,span,div,label{
	font-family: "Microsoft YaHei",SimSun,Arial,Helvetica,sans-serif; font-size: 12px;
	margin: 0px; padding: 0px; border: 0px;
}
input{
	font-family: "Microsoft YaHei",SimSun,Arial,Helvetica,sans-serif; font-size: 12px;
	margin: 0px; padding: 0px 5px; border: 1px solid #cccccc; border-radius: 5px; 
}
select {
	border: 0px;
}


.http-test{
	width: 100%; height: 100%;
}
.http-basic{
	width: calc(100% - 64px); height: 36px; line-height: 36px;
	display: inline-flex; flex-flow: row nowrap; justify-content: space-between;
	padding: 0px 18px; margin: 5px 10px;
	background-color: #ffffff;
    border: 1px solid #cccccc; border-radius: 18px; 
	overflow: hidden;
}
.http-request{
	width: 100%; height: 280px; 
}
.http-response{
	width: calc(100% 20px);height: calc(100% - 360px); 
	margin: 20px 10px 5px 10px;
	overflow: hidden;
}

.http-basic>select{
	width: 60px; font-weight: bolder;
}
.http-basic>input{
	width: calc(100% - 120px);
	border: 0px;
	border-left: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	border-radius: 0px; 
}
.http-basic>div{
	width: 58px;
	text-align: center;
	cursor: pointer;
}
.http-request>div{
	width: 100%; 
}
.http-request>div:first-child{
	height: 32px;
	display: inline-flex; flex-flow: row nowrap; justify-content: flex-start;
	overflow: visible;
}
.http-request>div:first-child>div{
	display: flex; flex: 1 1 auto; justify-content: center;
	padding: 5px 20px;
	border-bottom: 3px solid #cccccc;
	text-align: center;
}
.http-request>div:first-child>div.http-request-tab-selected{
	border-bottom-color: #409eff;
}
.http-request>div:first-child>div:last-child{
	flex: 3 0 auto;
}
.http-request>div:last-child{
	height: calc(100% - 32px);
	padding: 5px 10px;
}
.http-request>div:last-child>div{
	width: calc(100% - 20px);
	display: none;
}
.http-request>div:last-child>div:first-child{
	height: 100%;
	overflow: hidden; overflow-y: auto;
}
.http-request>div:last-child>div:first-child>div{
	width: calc(100% - 2px); height: 25px; max-height: 25px; line-height: 25px;
	display: inline-flex; flex-flow: row nowrap; justify-content: flex-start;
	margin: 2px 0px;
	border: 1px solid rgb(220, 220, 200);
	flex: 1 0 auto;
	overflow: hidden;
}
.http-request>div:last-child>div:first-child>div:last-child{
	font-family: iconfont; font-size: 18px; color: #FFFFFF;
	text-align: center; justify-content: center;
	background-color: rgba(104,104,104,0.23);
	cursor: pointer;
}
.http-request>div:last-child>div:first-child>div input{
	border: 0px;
}
.http-request>div:last-child>div:first-child>div input:first-child{
	width: 150px; text-align: right;
}
.http-request>div:last-child>div:first-child>div input:last-child{
	width: calc(100% - 130px);
}
.http-request>div:last-child>div:first-child>div span{
	padding: 0px 10px 0px 5px;
}
.http-request>div:last-child>div:nth-child(2){
	height: 100%;
}
.http-request>div:last-child>div:nth-child(2) textarea{
	height: calc(100% - 2px);
}
.http-request>div:last-child>div.http-request-tab-selected{
	display: flex; flex-flow: column nowrap; justify-content: flex-start;
}
.http-response>div{
	font-size: 16px; font-weight: bolder;
}
.http-response>textarea{
	width: calc(100% - 10px); height: calc(100% - 32px);
}